<template>
    <div class="login-container" v-loading="loading">
        <h2 class="title">管理端登录</h2>
        <form @submit.prevent="login">
            <div class="inp_heng">
                <el-input v-model.trim="credentials.username" placeholder="账号" clearable prefix-icon="Document" />
            </div>
            <div class="inp_heng">
                <el-input v-model.trim="credentials.password" type="password" placeholder="密码" show-password
                    prefix-icon="Memo" />
            </div>
            <button type="submit">登录</button>
        </form>
    </div>
</template>

<script setup>
    import {
        ref,
        reactive
    } from "vue";
    import {
        RouterLink,
        RouterView,
        useRoute
    } from "vue-router";
    import {
        ElNotification,
        ElMessageBox,ElMessage
    } from "element-plus";
    import request from "../../utils/request";

    const route = useRoute();
    let loading = ref(false);

    const credentials = reactive({
        username: "",
        password: "",
    });

    const login = () => {
        // TODO: 登录逻辑
        if (credentials.username == "") {
            ElMessage({
                message: '请输入账号/用户名',
                grouping: true,
                type: 'warning',
                duration : 1000
            })
        } else if (credentials.password == "") {
            ElMessage({
                message: '请输入密码',
                grouping: true,
                type: 'warning',
                duration : 1000
            })
        } else {
			loading.value = true;
            const formData = new FormData();
            formData.append("username", credentials.username);
            formData.append("password", credentials.password);
            request.commonLogin({
                data: formData
            }, (result) => {
				let errorTime = null;
				clearTimeout(errorTime);
				result ?  ElMessage({
							message: '登录成功！',
							grouping: true,
							type: 'success',
							duration : 1500,
							onClose : ()=>{
								loading.value = false;
								location.replace(route.query.from_url || "/car_wash/admin/");
							}
						}) : 
						errorTime = setTimeout(()=>{
							loading.value = false;
						},1000)
						
            });
        }
    };
</script>

<style scoped lang="scss">
    /*  公共颜色 */
    $main: #409eff;

    .login-container {
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        width: 400px;
        padding: 20px 30px 30px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        .title {
            color: $main;
            text-align: center;
            margin-bottom: 20px;
        }

        .inp_heng {
            margin-bottom: 15px;

            .el-input__inner {
                width: 100%;
                height: 45px;
                border-radius: 5px;
            }
        }

        button[type="submit"] {
            width: 100%;
            padding: 8px;
            background-color: $main;
            cursor: pointer;
            border: none;
            color: #fff;
            border-radius: 5px;
        }
    }
</style>